<template>
    <div class="body">
      <el-form class="loginContainer">
        <h3 class="loginTitle">
          用户注册
        </h3>
        <el-form-item >
          <el-input type="text" v-model="user.userInfoTel" placeholder="请输入电话号码">
          </el-input>
        </el-form-item>
        <el-row>
                  <el-button @click="havecode">发送验证码</el-button>
                </el-row>
        <el-form-item >
          <el-input type="text" v-model="user.code" placeholder="请输入验证码">
          </el-input>
        </el-form-item>
        <el-form-item >
          <el-input type="text" v-model="user.userAccount" placeholder="请输入账号">
          </el-input>
        </el-form-item>
        <el-form-item >
          <el-input type="password" v-model="user.userPass" placeholder="请输入密码">
          </el-input>
        </el-form-item>
        <el-button type="primary" @click="register" style="width:100%">立即注册</el-button>
        <div class="registerLink">
                注册完成？<a href="#/UserLogin" class="registerButton">立即登录</a>
        </div>
      </el-form>
    </div>
  </template>
  
  <script>
    export default {
      name: "UserRegister",
      data() {
        return {
          user:{
            userAccount:"",
            userPass:"",
            userInfoTel:"",
            code:""
          }
        }
      },
      methods: {
          havecode(){
            this.$http.get("/user/userAccount/send", {
                params:{
                    userInfoTel:this.user.userInfoTel
                }
            }).then(resp => {
                alert(resp.data.message)
            })
          },
          register(){
            this.$http.post("/user/userAccount/register",this.user).then(resp => {
                alert(resp.data.message)
                if (resp.data.code == 200) {
                    this.$router.push("/UserLogin")
                }
            })
          }
    },
  }
  </script>
  
  <style>
    .loginContainer {
      border-radius: 15px;
      background-clip: padding-box;
      text-align: left;
      margin: auto;
      margin-top: 180px;
      width: 350px;
      padding: 15px 35px 15px 35px;
      background: aliceblue;
      border: 1px solid blueviolet;
      box-shadow: 0 0 25px #55aaff;
      margin-right: 100px;
    }
  
    .loginTitle {
      margin: 0px auto 48px auto;
      text-align: center;
      font-size: 40px;
    }
  
    .loginRemember {
      text-align: left;
      margin: 0px 0px 15px 0px;
    }
  
    .body {
      margin-top: -100px;
      width: 100vw;
      height: 100vh;
      background-image: url("../../static/images/system/11.jpg"); 
      background-size: 100%;
      overflow: hidden;
    }
  
    .registerLink {
      text-align: center;
      margin-top: 10px;
    }
  
    .registerLink a {
      color: blue;
    }
  </style>
  